<script setup>

const props = defineProps({
  rowKey: {
    type: String,
    default: 'id'
  },
  columns: {
    type: Array,
    required: true,
    default: () => [
      { label: '物料名称', prop: 'bii_name' },
      { label: '物料', prop: 'bii_key' }
    ]
  },
  data: {
    type: Array,
    required: true,
    default: () => {
      return []
    }
  },
  labelAlign: {
    type: String,
    default: 'right'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  deleteBtn: {
    type: Boolean,
    default: false
  },
  footer: {
    type: Boolean,
    default: false
  },
  selected: {
    type: Array,
    default: ()=>[]
  },
  checkStrict:{
    type: Boolean,
    default:false
  }
})

</script>

<template>
  <div class="item-warp"
       v-for="(row,index) in props.data"
       :key="(row[props.rowKey] || `item-list-${index}`)"
  >
    <label class="item-label" v-if="!props.checkStrict">
      <slot name="type" :value="row[props.rowKey]"></slot>
      <div :class="['item-container',selected.includes(row[props.rowKey])?'active':'']">
        <div class="item-context">
          <ol class="item-rows">
            <li class="item" v-for="(col) in props.columns">
              <span :class="['label text',`label-align-${props.labelAlign}`]">{{ col.label }}：</span>
              <span class="value text-elipse text" v-if="!col.slot">{{ row[col.prop] }}</span>
              <slot :name="col.prop" :row="row" v-else></slot>
            </li>
          </ol>
        </div>
      </div>
    </label>
    <template v-else>
      <label class="item-label strict">
      <slot name="type" :value="row[props.rowKey]"></slot>
      </label>
      <div :class="['item-container',selected.includes(row[props.rowKey])?'active':'']">
        <div class="item-context">
          <ol class="item-rows">
            <li class="item" v-for="(col) in props.columns">
              <span :class="['label text',`label-align-${props.labelAlign}`]">{{ col.label }}：</span>
              <span class="value text-elipse text" v-if="!col.slot">{{ row[col.prop] }}</span>
              <slot :name="col.prop" :row="row" v-else></slot>
            </li>
          </ol>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">

.item-warp {
  margin: 12rpx 22rpx;
  display: flex;
  flex-wrap: wrap;

  .item-label{
    margin: 0;
    padding: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;

    &.strict{
      flex-grow: initial;
    }

  }

  .item-container {
    flex-grow: 1;
    background-color: #ffff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;

    &.active {
      background-color: #ebebeb;
    }

    .item-oper {
      padding: 8rpx 12rpx;

      .item-oper-context {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
      }

    }
  }

  .item-context {
    border-top: 1px solid #E5E5E5;
    flex-grow: 1;
    padding: 8px 12px;
    //min-height: 150rpx;


    .item-rows {
      list-style-type: none;
      padding: 0;
      margin: 0;


      .item {
        display: flex;
        flex-direction: row;
        align-items: center;

        .text {
          font-size: 14px;
        }

        .label {
          color: #666666;
        }
      }

    }
  }

  .item-deletion {
    display: flex;
    align-items: center;
    justify-content: center;

    .deletion-btn {
      padding: 32rpx 20rpx;
      color: #e63e35;
    }

  }

  .label-align {
    &-left {
      min-width: 80px;
      text-align: left;
    }

    &-right {
      min-width: 80px;
      text-align: right;
    }
  }

  .text-elipse {
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

}
</style>
